<template>
    <SysDialog :title="dialog.title" :visible="dialog.visible" :width="dialog.width" :height="dialog.height"
        @onClose="onClose" @onConfirm="commit">
        <template v-slot:content>
            <el-form :model="addModel" ref="addFormRef" label-width="90px" :inline="false" size="default">
                <el-row :gutter="20">
                    <el-col :span="8" :offset="0">
                        <el-form-item prop="jiHuiMingCheng" label="机会名称">
                            <el-input v-model="addModel.jiHuiMingCheng"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="0">
                        <el-form-item prop="xiangMuMingCheng" label="项目名称">
                            <el-input v-model="addModel.xiangMuMingCheng"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8" :offset="0">
                        <el-form-item prop="xiaoShouJiHuiZhuTi" label="销售机会主题" label-width="120px">
                            <el-input v-model="addModel.xiaoShouJiHuiZhuTi"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="0">
                        <el-form-item prop="cunHuo" label="存货">
                            <el-input v-model="addModel.cunHuo"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8" :offset="0">
                        <el-form-item prop="keHu" label="客户">
                            <!-- <el-input v-model="addModel.keHu"></el-input> -->
                             <el-select v-model="addModel.keHu" placeholder="请选择客户">
                               <el-option label="张三" value="张三"></el-option>
                               <el-option label="李四" value="李四"></el-option>
                               <el-option label="小明" value="小明"></el-option>
                             </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="0">
                        <el-form-item prop="jieDuan" label="阶段">
                            <el-input v-model="addModel.jieDuan"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8" :offset="0">
                        <el-form-item prop="hangYe" label="行业">
                            <el-input v-model="addModel.hangYe"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="0">
                        <el-form-item prop="yuSuan" label="预算">
                            <el-input v-model="addModel.yuSuan"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8" :offset="0">
                        <el-form-item prop="pianQu" label="片区">
                            <el-input v-model="addModel.pianQu"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="0">
                        <div>
                            <el-form-item prop="xiaoShouJiHuiRiQi" label="销售机会日期" label-width="120px">
                                <el-date-picker v-model="addModel.xiaoShouJiHuiRiQi"
                                    placeholder="请选择日期"></el-date-picker>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8" :offset="0">
                        <el-form-item prop="jieShouZhuangTai" label="接受状态">
                            <el-input v-model="addModel.jieShouZhuangTai"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="0">
                        <div>
                            <el-form-item prop="xianSuoLaiYuan" label="线索来源">
                            <el-input v-model="addModel.xianSuoLaiYuan"></el-input>
                        </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8" :offset="0">
                        <el-form-item prop="jieShouZhuangTai" label="销售机会传递">
                            <el-input v-model="addModel.xiaoShouJiHuiChuanDi"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="0">
                        <div>
                            <el-form-item prop="xianSuoLaiYuan" label="机会跟踪录入">
                            <el-input v-model="addModel.jiHuiGenZongLuRu"></el-input>
                        </el-form-item>
                        </div>
                    </el-col>
                </el-row>

                <el-form-item prop="beiZhu" label="备注">
                    <textarea rows="5" cols="100" v-model="addModel.beiZhu"></textarea>
                </el-form-item>

            </el-form>

        </template>
    </SysDialog>
</template>

<script setup lang="ts">

import SysDialog from '@/components/SysDialog.vue'
import useDialog from '@/hooks/useDialog';
import { nextTick, reactive, ref } from 'vue';
import { ElMessage, FormInstance } from 'element-plus';
import { addUserApi, editUserApi, getListApi } from '@/api/xsjh';
import { EditType, Title } from '@/type/BaseType';
import { XsjhModel } from '@/api/xsjh/XsjhModel';
const { dialog, onClose, onConfirm, onShow } = useDialog()    
const show = (type: string, row?: XsjhModel) => {
    
    type == EditType.ADD ? dialog.title = Title.ADD : dialog.title = Title.EDIT
    dialog.height = 500
    dialog.width = 1000
    dialog.visible = true

    if (row) {
        nextTick(() => {
            Object.assign(addModel, row)
            console.log('addModel:', addModel);
        })
    }

    addFormRef.value?.resetFields()

    addModel.type = type;
};

defineExpose({
    show
})
 

const addModel = reactive<XsjhModel>({
    type: '',
    id: '',
    jiHuiMingCheng: '',
    xiangMuMingCheng: '',
    jieShouZhuangTai: '',
    xiaoShouJiHuiRiQi: '',
    xiaoShouJiHuiZhuTi: '',
    cunHuo: '',
    yuSuan: '',
    xianSuoLaiYuan: '',
    keHu: '',
    jieDuan: '',
    hangYe: '',
    pianQu: '',
    beiZhu: '',
    jiHuiGenZongLuRu:'',
    xiaoShouJiHuiChuanDi:'',

})

const addFormRef = ref<FormInstance>()


const emists = defineEmits(['onFresh'])  


const commit = () => {
    addFormRef.value?.validate(async (valid) => {
        if (valid) {
            let res = null;
            if (addModel.type == EditType.ADD) {
                res = await addUserApi(addModel);
            } else {
                res = await editUserApi(addModel);
            }
            console.log(res)
            if (res && res.code == 200) {
                ElMessage.success(res.msg)
                emists('onFresh')
                onClose()
            }
        }
    })
}
</script>
<style scoped></style>